<template>
    <div class="card p10 m5 flex_col">
        <label class="flex_center_self">取货电机控制</label>
        <div class="flex_row_center mt10">
            <label>位置:</label>
            <el-input clearable v-model="ctx.position" class="ml5" style="width: 100px;"/>
            <el-button class="ml5" @click="onClickCtrl" type="primary">控制</el-button>
        </div>
        <div class="flex_row_center mt5">
            <label>列:</label>
            <el-select style="width: 100px;" v-model="ctx.col">
                <el-option
                    v-for="(item, index) in COLS"
                    :key="index"
                    :label="item"
                    :value="item"
                    />
            </el-select>
            <el-button @click="onClickColCtrl" type="success" class="ml5">控制</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { pickCtrl } from '@/service/devices/cargo';
import { cargo_position_with_col, COLS } from '@/utils/config';
import { runAction } from '@/utils/ui';
import { reactive } from 'vue';

interface Props {
    index: number,
}

const props = defineProps<Props>();

interface Ctx {
    position: string;
    col: number,
}

const ctx = reactive<Ctx>({
    position: '0',
    col: 1,
});

async function onClickColCtrl() {
    await runAction('取货电机控制', `移动到第${ctx.col}行`, async () => {
        const position = cargo_position_with_col(ctx.col) ;
        await pickCtrl({
            index: props.index,
            position
        });
    });
}

async function onClickCtrl() {
    await runAction('取货电机控制', '', async (dialog) => {
        const position = parseInt(ctx.position);
        if (isNaN(position)) {
            throw '请输入位置';
        }
        await pickCtrl({
            index: props.index,
            position
        });
    });
}

</script>

